<!DOCTYPE html SYSTEM "http://www.thymeleaf.org/dtd/xhtml1-strict-thymeleaf-spring4-4.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:th="http://www.thymeleaf.org">
<html >
<head>
    <meta charset="UTF-8">
    <title>Contest - Online Judge</title>
    <link rel="stylesheet" th:href="@{/css/styles.css}" >
    <link rel="stylesheet" th:href="@{/js/editormd/css/editormd.css}" />
    <link rel="stylesheet" th:href="@{/js/editormd/css/editormd.preview.css}" />
    <script th:src="@{/js/jquery-1.7.2.js}"></script>
    <script th:src="@{/js/gdoj.js}"></script>
    <script type='text/javascript' th:src="@{/js/editormd/lib/marked.min.js}"></script>
    <script type='text/javascript' th:src="@{/js/editormd/lib/prettify.min.js}"></script>
    <script type='text/javascript' th:src="@{/js/editormd/editormd.min.js}"></script>
    <script type='text/javascript' th:src='@{/js/editor-md.js}'></script>
    <script type="text/javascript">
        $(document).ready(function() {
            OnlineJudge.countdown();
        });
    </script>
</head>
<body>
<div th:replace="common::web-navbar"></div>
<div class="container">
    <div class="content">
        <div class="content-with-sidebar"> 	 <!-- class="content-with-sidebar" -->
            <div id="nav-content" >
                <a th:href="@{/contest/{contestId}(contestId=${contest.contest_id})}" class="current">[[#{contestproblems}]]</a>
                <a th:href="@{/contest/{contestId}/status(contestId=${contest.contest_id})}">[[#{status}]]</a>
                <a th:href="@{/contest/{contestId}/standings(contestId=${contest.contest_id})}" target="blank">[[#{standings}]]</a>
                <a th:href="'/contest/' + ${contest.contest_id} + '/status/' + ${session.session_username} + '/page/1'" target="blank">[[#{mysubmission}]]</a>
            </div>
            <div class="content" style="padding:3px 3px 3px 3px;">
                <div class="data-title">
                    <h3 th:text="${contest.title}"></h3>
                    Start Time:<span th:text="${#dates.format(contest.start_time,'yyyy-MM-dd HH:mm:ss')}"></span>
                    &nbsp;&nbsp;End Time:<span th:text="${#dates.format(contest.end_time,'yyyy-MM-dd HH:mm:ss')}"></span>
                    <br/>
                    <div id="contest_status" class="">
                        <span class="ended" th:if="${contest.status == 'ENDED'}">Contest Ended</span>
                        <span class="running" th:if="${contest.status == 'RUNNING'}">Contest Running</span>
                        <span class="pending" th:if="${contest.status == 'PENDING'}">Contest Pending</span>
                        <br/><span id="clock" th:text="${contest.leftTime}" style="color:grey"></span>
                        <script language="javascript">
                            var str = $("#clock").text();
                            var n = str.split(":");
                            var time = parseInt(n[0]) * 3600 + parseInt(n[1]) * 60 + parseInt(n[2]);
                            function clock() {
                                if (time > 0) {
                                    $("#clock").html(OnlineJudge.formatSeconds(time));
                                    time--;
                                    if (time == 0) {
                                        $("#contest_status").html("Contest Ended");
                                        $("#contest_status").attr('class', 'ended');
                                    }
                                    setTimeout(clock, 1000);
                                } else {
                                    $("#clock").html("");
                                }
                            }
                            $(document).ready(function(){
                                clock();
                            })
                        </script>
                    </div>
                </div>
                <div class="roundbox">
                    <table class="problem rtable">
                        <tr class="header">
                            <th class="id left-item">[[#{problemid}]]</th>
                            <th class="title">[[#{problem}]]</th>
                            <th class="point" th:if="${contest.type==1}">[[#{point}]]</th>
                            <th class="solved">[[#{solved}]]/[[#{submit}]]</th>
                            <th class="ratio"></th>
                        </tr>
                        <tr th:if="${problems.size == 0}"><td class="left-item dark" colspan="15" style="text-align: left;">There is no records.</td></tr>
                        <tr th:each="problem,stat : ${problems}" th:class="${stat.odd}?'dark'">
                            <td class="id left-item"><a th:href="'/contest/' + ${problem.contest_id} + '/problem/' + ${problem.num}" th:text="${problem.num}"></a></td>
                            <td class="title" style="text-align: left;word-wrap:break-word;">
                                <a th:href="'/contest/' + ${problem.contest_id} + '/problem/' + ${problem.num}" th:text="${problem.title}"></a>
                            </td>
                            <td class="point" th:if="${contest.type==1}" th:text="${problem.point} + 'pt'"></td>
                            <td class="solved">
                                <a th:href="'/contest/' + ${contest.contest_id} + '/status/problem/' + ${problem.num} + '/page/1'" title="users solved this problem" th:text="${problem.solved}"></a>
                                <span style="font-size:11px;color:grey;font-family:verdana,Serif,Arial;" title="submissions"><sub>/<span th:text="${problem.submit}"></span></sub> </span>
                            </td>
                            <td class="ratio" >
                                <a th:href="'/contest/' + ${problem.contest_id} + '/problem/' + ${problem.num}" style="">
                                <img th:title="#{submit}" th:src="@{/img/submit-22.png}" style="vertical-align: middle;">
                                </a>
                            </td>
                        </tr>
                    </table>
                </div>
            </div>
        </div>
        <div class="sidebar">
            <div class="sidebox roundbox">
                <div class="top-link" style="border-bottom: 1px solid #b9b9b9;">
                    <div class="title-sidebox" style="width: 100%">[[#{sidebar.infobox}]]</div>
                </div>
                <div class="" style="margin: 6px;font-size: 12px;word-wrap:break-word;">
                    <div class="content markdown-view" id="contest-content-markdown-view">
                        <textarea style="display:none;" th:utext="${contest.description}"></textarea>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div th:replace="common::web-footer"></div>
</div>
</body>
</html>